<template>
	<view class="content">
		<u-input
		:custom-style="{color:'#ffffff',borderRight:'none'}"
		:placeholder='placeholder'
		border-color="#999999"
		v-model="Price" 
		type="number" 
		:border="true" />
		<view class="btn">
			<view class="add" @click="add">
				<image  src="../static/icon/s.png" mode=""></image>
			</view>
			<view class="cut" @click="cut">
				<image src="../static/icon/s.png" mode=""></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		// 此处定义传入的数据
		props: {
		    price: {
		        type: Number,
		        value: null
		    },
			step:{
				type:Number,
				value:null
			},
			placeholder:{
				type:String,
				value:null,
			}
		},
		data(){
			return{
				Price:this.price
			}
		},
		onReady() {
			uni.hideTabBar()
		},
		onLoad() {
		
		},
		methods:{
			//加
			add(){
				this.Price = Math.round((this.step+this.Price) * 100) /100
				
			},
			//减
			cut(){
				if(this.Price>0){
					this.Price =Math.round((this.Price-this.step) * 100) /100
				}
				
			}
		},
		watch:{
			Price:{
				handler(val) {
					if(Math.round((this.Price-this.step) * 100) /100<0){
						this.Price = 0
					}
					this.$emit('change', {
						Price:this.Price
				    })
				}
			},
			price (newV, oldV) { 
			  this.Price = newV
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		display: flex;
		.add,.cut{
			width: 46rpx;
			height: 40rpx;
			border: 1px solid #999999;
			border-radius: 8rpx;
			text-align: center;
			box-sizing: border-box;
			image{
				width: 25rpx;
				height: 15rpx;
				display: block;
				margin: 12.5rpx auto;
			}
		}
		.cut{
			image{
				transform:rotate(180deg);
			}
		}
		
	}
</style>
